<template>
    <h2 style="text-align: center;">用药列表</h2>
    <a href="/AddPhice" class="btn btn-success">添加用药信息</a><br>
    医生名称:<input type="text" placeholder="请输入医生名称" v-model="name" style="margin-right: 10px;" />
    所属科室:<select v-model="Dept_Id"  style="margin-right: 10px;"> 
                <option :value="-1">请选择</option>
                <option v-for="item in InfoDept" :value="item.Dept_Id">{{ item.Dept_Name }}</option>
            </select>
            <input type="button" value="查询" class="btn btn-success" @click="ShowPhice"  style="margin-right: 10px;"/>
            <input type="button" value="批量修改状态" class="btn btn-success" @click="UpdAllState"  style="margin-right: 30px;"/>
            <input type="button" value="用药信息导出Excel" class="btn btn-success" @click="ExportFile" />
    <table border="1" class="table table-bordered">
        <thead style="background-color: aquamarine;">
            <tr style="text-align: center;">
                <th><input type="checkbox" v-model="flas" @change="SelectAll" /></th>
                <th>用药编号</th>
                <th>药品名称</th>
                <th>用药日期</th>
                <th>病人名称</th>
                <th>配药医生</th>
                <th>科室名称</th>
                <th>用药状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody style="text-align: center;">
            <tr v-for="item in Info">
                <th><input type="checkbox" v-model="ariess" :checked="IsChecked" :value="item.Phice_Id" /></th>
                <td>{{ item.Phice_Id }}</td>
                <td>{{ item.Phice_Name }}</td>
                <td>{{ item.Phice_Time.substring(0,10) }}</td>
                <td>{{ item.Phice_UserName }}</td>
                <td>{{ item.Phice_Doctor }}</td>
                <td>{{ item.Dept_Name }}</td>
                <td v-show="item.Phice_State==true" style="color: green;">未开始</td>
                <td v-show="item.Phice_State==false" style="color: red;">已完成</td>
                <td>
                    <input @click="UpdPhice(item.Phice_Id)" type="button" value="修改"  class="btn btn-success" style="margin-right: 10px;" />
                    <input @click="DelPhice(item.Phice_Id)" type="button" value="删除"  class="btn btn-danger"  />
                </td>
            </tr>
        </tbody>
    </table>
    <span>
        数据共{{ PageInfo.zongtiao }}条，每页{{ PageInfo.size }}条，共{{ PageInfo.index }}/{{ PageInfo.zongpage }}页

        <a @click="FanYe('F')" class="btn btn-success" style="margin-right: 10px;">首页</a>
        <a @click="FanYe('U')" class="btn btn-success" style="margin-right: 10px;">上一页</a>
        <a @click="FanYe('N')" class="btn btn-success" style="margin-right: 10px;">下一页</a>
        <a @click="FanYe('E')" class="btn btn-success" style="margin-right: 10px;">尾页</a>
    </span>
</template>


<script setup lang="ts">
    import {ref,onMounted} from 'vue';
    import axios from 'axios';
    import { useRouter } from 'vue-router';
    
    const router=useRouter();

    //显示响应式数据
    const Info:any=ref([{
        Phice_Id: 0,
        Phice_Name: "",
        Phice_Time: "",
        Phice_UserName: "",
        Phice_State: false,
        Phice_Doctor: "",
        Dept_Id: -1,
        Dept_Name: ""
    }])
    //科室响应式数据
    const InfoDept=ref([{
        Dept_Id: 0,
        Dept_Name: "",
    }])
    //分页响应式数据
    const PageInfo=ref({
        index:1,
        size:2,
        zongtiao:0,
        zongpage:0,
    })
    //翻页
    const FanYe=(chooes:string)=>{
        switch(chooes)
        {
            case"F":
                PageInfo.value.index==1;
            break;
            case"U":
                if(PageInfo.value.index>1)
                {
                    PageInfo.value.index--;
                }
                else
                {
                    alert('当前已经是第一页！');
                    return;
                }
            break;
            case"N":
                if(PageInfo.value.index<PageInfo.value.zongpage)
                {
                    PageInfo.value.index++;
                }
                else
                {
                    alert('当前已经是最后一页！');
                    return;
                }
            break;
            case"E":
                PageInfo.value.index==PageInfo.value.zongpage;
            break;
        }
        ShowPhice();//显示
    }
    onMounted(()=>{
        GetDept();//获取科室信息
        ShowPhice();//显示
    })
    //全选
    const flas=ref(false);
    const IsChecked=ref(false);
    const ariess=ref([]);
    const SelectAll=()=>{
        if(flas.value)
        {
            IsChecked.value=true;
            ariess.value=Info.value.map((item:any)=>{
                return item.Phice_Id;
            })
        }
        else
        {
            IsChecked.value=false;
        }
    }
    //获取科室信息
    const GetDept=()=>{
        axios.get("https://localhost:44339/api/Phice/GetDept")
        .then(res=>{
            InfoDept.value=res.data
        })
    }
    //显示
    const name=ref("");
    const Dept_Id=ref(-1);
    const ShowPhice=()=>{
        axios.get("https://localhost:44339/api/Phice/ShowPhice",
            {
                params:{
                    name:name.value,
                    Dept_Id:Dept_Id.value,
                    index:PageInfo.value.index,
                    size:PageInfo.value.size
                }
            }
        )
        .then(res=>{
            Info.value=res.data.Plist,
            PageInfo.value.zongpage=res.data.ZongPage,
            PageInfo.value.zongtiao=res.data.ZongTiao
        })
    }
    //删除 
    const DelPhice=(Phice_Id:number)=>{
        if(confirm("确定删除?")){
            axios.delete("https://localhost:44339/api/Phice/DelPhice?id="+Phice_Id)
            .then(res=>{
                if(res.data>0)
                {
                    alert('删除成功');
                    ShowPhice();//显示
                }
                else
                {
                    alert('删除失败');
                }
            })
        }
    }
    //修改
    const UpdPhice=(Phice_Id:number)=>{
        router.push({
            name:"UpdPhice",
            params:{
                id:Phice_Id
            }
        })
    }
    //批量修改状态
    const UpdAllState=()=>{
        if(confirm("确定修改?")){
            axios.put("https://localhost:44339/api/Phice/UpdAllState?id="+ariess.value.toString())
            .then(res=>{
                if(res.data>0)
                {
                    alert('修改成功');
                    ShowPhice();//显示
                }
                else
                {
                    alert('修改失败');
                }
            })
        }
    }
    //用药信息导出
    const ExportFile=()=>{
        axios.post("https://localhost:44339/api/Phice/ExportFile?FPath="+"E://桌面/潘佳豪2.18月考/PhiceInfo.xlsx")
        .then(res=>{
            if(res.data>0)
            {
                alert('用药信息导出成功');
            }
            else
            {
                alert('用药信息导出失败');
            }
        })
    }
</script>